<template>
    <!-- 主内容区域 -->  
    <el-main>
    <el-row :gutter="10">
      <el-col
        v-for="flower in flowers"
        :key="flower.id"
        :span="6"
        class="flower-col"
      >
        <el-card class="custom-card">
          <img :src="`${flower.image}`" class="card-image" alt="Flower" />
          <div class="card-content">
            <h3 class="flower-name">{{ flower.name }}</h3>
            <p class="flower-description">{{ flower.description }}</p>
            <div class="action-buttons">
              <el-button type="primary" size="mini" @click="addToCart(flower)">加入购物车</el-button>
            </div>
            <p class="price">¥{{ flower.price }}</p>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </el-main>
</template>

<script setup>
import { ref } from 'vue';
import { ElMessage, ElMessageBox, ElMenu, ElMenuItem, ElInput, ElButton, ElForm, ElFormItem } from 'element-plus';  
// 示例花卉数据  
const flowers = ref([  
  { id: 1, name: '玫瑰', description: '美丽的红玫瑰', image: '/src/store/玫瑰花.jpg', price: 99 },  
  { id: 2, name: '百合', description: '清新的百合花', image: '/src/store/白百合.jpg', price: 79 },  
  { id: 3, name: '郁金香', description: '优雅的郁金香', image: '/src/store/郁金香.jpg', price: 59 }, 
  { id: 4, name: '菊花', description: '多彩的菊花', image: '/src/store/菊花.jpg', price: 39 },
  { id: 5, name: '向日葵', description: '阳光灿烂的向日葵', image: '/src/store/向日葵.jpg', price: 49 },
  { id: 6, name: '康乃馨', description: '温馨的康乃馨', image: '/src/store/康乃馨.jpg', price: 69 },
  { id: 7, name: '兰花', description: '高雅的兰花', image: '/src/store/兰花.jpg', price: 89 },
  { id: 8, name: '满天星', description: '小巧可爱的满天星', image: '/src/store/满天星.jpg', price: 59 },
  // 添加更多花卉数据...  
]);  
</script>

<style scoped>
/* 自定义卡片样式 */
/* 自定义卡片和内容的样式 */
/* 自定义列样式（可选） */
.flower-col {
  display: none;
  transition: all 0.3s ease;
  place-items: center;
}
 
.flower-col:hover {
  transform: scale(1.05);
}
/* 自定义卡片样式 */
.custom-card {
  border-radius: 10px; /* 稍微增加圆角，使卡片看起来更柔和 */
  overflow: hidden; /* 隐藏卡片内部内容溢出部分 */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15); /* 增加阴影深度，提升立体感 */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* 添加平滑过渡效果 */
  width: 200px; /* 稍微增加卡片宽度 */
  height: 250px; /* 稍微增加卡片高度 */
  background-color: #fff; /* 添加背景色，确保卡片内容清晰可见 */
  margin: 10px; /* 增加卡片间距，使布局更美观 */
  display: grid; /* 设置为Grid容器 */
  place-items: center; /* 同时水平和垂直居中 */
  position: relative; /* 确保子元素可以相对于卡片定位 */
}
.custom-card img {
  max-width: 100%; /* 确保图片不会超出卡片宽度 */
  max-height: 100%; /* 确保图片不会超出卡片高度 */
  object-fit: contain; /* 保持图片比例 */
}
 
.custom-card:hover {
  transform: translateY(-10px); /* 鼠标悬停时卡片轻微上移 */
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2); /* 鼠标悬停时增加阴影深度 */
}
 
/* 自定义卡片内的图片样式 */
.card-image {
  margin-left: 20px;
  width: 70%; /* 图片宽度占满卡片宽度 */
  height: auto; /* 图片高度自动调整，保持比例 */
  display: block; /* 去除图片底部的空白间隙 */
  border-radius: 12px 12px 0 0; /* 图片顶部圆角与卡片圆角一致 */
}
 
/* 自定义卡片内容的样式 */
.card-content {
  padding: 5px; /* 增加内边距，提升可读性 */
  text-align: center; /* 文本内容居中对齐 */
}
 
.flower-name {
  margin: 0;
  font-size: 12px;/* 增加字体大小 */
  font-weight: bold;/* 加粗字体 */
  color: #333; /* 加深字体颜色，提升可读性 */
}
 
.flower-description {
  color: #666;/* 字体颜色稍微变暗 */
  font-size: 10px;/* 稍微增加字体大小 */
  margin: 0 0 20px;
  line-height: 1.5; /* 增加行高，提升可读性 */
  margin: 5px;
}
.action-buttons{
  display: flex;
  justify-content: center;
  margin-top: 0; /* 按钮上边距增加，与内容之间增加间距 */
}
.action-buttons button {
  width: 80px; /* 稍微增加按钮宽度 */
  height: 30px; /* 稍微增加按钮高度 */
  margin: 0 5px; /* 按钮之间增加间距 */
  padding: 0 2px; /* 按钮内边距增加，提升点击区域 */
  border: none; /* 去除边框 */
  border-radius: 5px; /* 添加圆角 */
  background-color: #007bff; /* 设置按钮背景色 */
  color: #fff; /* 设置按钮字体颜色 */
  font-size: 12px; /* 增加字体大小 */
  cursor: pointer; /* 添加鼠标指针样式，提升交互感 */
  transition: background-color 0.3s ease; /* 添加背景色过渡效果 */
}
.action-buttons button:hover {
  background-color: #0056b3; /* 鼠标悬停时改变按钮背景色 */
}
 
/* 价格样式 */
.price {
  color: #f56342; /* 设置价格字体颜色 */
  font-size: 15px; /* 增加字体大小 */
  font-weight: bold; /* 加粗字体 */
  margin-top: 5px; /* 调整上边距 */
}

/* 针对小屏幕的样式调整 */
@media (max-width: 768px) {
  .el-row .flower-col {
    span: 12 !important; /* 注意：这里的!important是为了覆盖之前的:span="6"，但在实际项目中应尽量避免使用!important */
    /* 或者，更推荐的做法是定义一个新的类名，并在媒体查询中应用这个类名 */
  }
}
</style>